<!DOCTYPE html>
<html>
<head>
  <title>登录</title>
  <style>
    a{color: #FFFFFF;}
    form {
      width: 300px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    legend {
      font: 24px 楷体;
      padding: 5px 15px;
      border-radius: 10px;
      text-align: center;
    }

    input {
      width: 100%;
      padding: 8px;
      margin-bottom: 15px;
      box-sizing: border-box;
    }


    button {
      background-color: black;
      color: white;
      padding: 10px 15px;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      width: 100%;
    }
    .q{
      margin: 0px 5000px 0px 0px;
    }
    #w:hover{
                color:#F0AD4E;  
            }
            #e:hover{
                color:#F0AD4E;  
            }
            #r:hover{
                color:#F0AD4E;  
            }
            #t:hover{
                color:#F0AD4E;  
            }
            #y:hover{
                color:#F0AD4E;  
            }
            #u:hover{
                color:#F0AD4E;  
            }
            #i:hover{
                color:#F0AD4E;   
            }
            #nav{
                font: 24px 楷体;
                color: #FFFFFF;
                border: 1px solid black;
                padding-left: 10px;
                padding-top: 20px;
                padding-bottom: 20px;
                padding-right: 40px ;
                background-color:black;
                text-align: center;
            }
  </style>
</head>

<body>
    <div id="box">
        <p id="nav"><a class="q" href = "shouye.html" >WHITE</a> <a href="shouye.html" id="w">首页</a> <a href="guanyu.html" id="e">关于</a> <a href="zhaopianji.html" id="r">照片集</a> <a href="fuwu.html" id="t">服务</a> <a href="weibo.html" id="y">微博</a> <a href="lianxi.html" id="u">联系</a> <a href="denglu.html  " id="i">登录</a></p>
  <form id="loginForm">
    <legend>登录</legend>
    <p>账号：
    <input type="text" id="username"></p>
    <p>密码:
    <input type="password" id="password"></p>
    <button type="button" onclick="login()">登录</button>
  </form>

  <script>
    function login() {
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;

      if (username === "") {
        alert("账号不能为空");
        return;
      }

      if (password === "") {
        alert("密码不能为空");
        return;
      }

      if (username.length < 3) {
        alert("账号长度少于 3 位");
        return;
      }

      if (password.length < 6) {
        alert("密码长度少于 6 位");
        return;
      }

      if (username === "admin" && password == "123456") {
        window.location.href = "shouye.html"; 
      }else{
        alert("账号或密码错误");
      }
    }
  </script>
</body>

</html>